class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            Lbimgtext:'',
            list: [],
            id: 0,
            start: 0,
            pagesize: 100,
            fileimgshow: !0,
            imgstate: '',
            imgsrc: '',
            keyword: "",
            counts: [],
            state:'LISTEN',
            path:'',
        };
    }

  

    componentDidMount() {

        /**复文本 */
        let UE = window.UE, that = this,{state}=that.state
        $(`input[name='state'][value=${state}]`).prop("checked", "checked");
        let ueditor = UE.getEditor('ueditor', {
            autoHeightEnabled: true,
            autoFloatEnabled: true
        });
        ueditor.addListener("ready", function () {
            that.setState({ ueditor }, () => {
                let id = GetQueryString('id')
                if (id != 'null' && id) {
                    that.setState({ id }, () => {
                        that.freshlist()
                    })
                } 
            });
        }, 2);
        
        

    }

    freshlist() {
        let { id } = this.state, that = this;
        Swiperfindbyids(id, res => {
            if (res.issuccess == 1) {
                var { imgsrc, ueditor, state, } = this.state, x = res.data
                ueditor.setContent(that.replaceraw(decodeURIComponent(x.detail)))
                state=x.type
                imgsrc = `${API_HEAD}imgs/${x.thumbpath}`
                $(`input[name='state'][value=${state}]`).prop("checked", "checked");
                this.setState({ imgsrc, fileimgshow:!1,state,path:x.path })
            }
        })

    }
    

/**xyj  */
    togoodstype() {
        window.location.href = "./firstPage.html";
    }
    replaceraw(content) {
        return content.replace('rgb(', 'rgb').replace(new RegExp('rgb', 'g'), "rgb(");
    }
   // 图片
   filechangeimg(e) {
    var that = this;
    var filedata = $('#file' + e)[0].files[0];
    let _name, _fileName;
    _name = $('#file' + e)[0].value;
    _fileName = _name.substring(_name.lastIndexOf(".") + 1).toLowerCase();
    if (_fileName !== "png" && _fileName !== "jpg" && _fileName !== "gif" && _fileName !== "jpeg") {
        alert("上传图片格式不正确，请重新上传");
    } else {
        if (e == '3') {
            this.setState({
                fileimgshow: !1,
                imgstate: ''
            })
        }
        
        let filee = e
        var reader = new FileReader();
        reader.readAsDataURL(filedata);
        reader.onload = function (e) {
            var base64str = e.target.result;
            that.putswiperimglistdata([base64str], filee)
        }
    }
}
putswiperimglistdata(target, e) {
    let { imgsrc, lbimgsrc, lbimgsrcarr } = this.state;
    if (e == '3') {
        imgsrc = target[0]
        if (!isBase64(imgsrc)) {
            if (imgsrc.indexOf(`${API_HEAD}`) == -1) {
                imgsrc = `${API_HEAD}imgs/${src}`

            }
        }
    }

    // imgarr=imgarr.concat(imgsrc,lbimgsrcarr)

    this.setState({
        imgsrc
    })

}
clickupload(e) {
    $('#file' + e).click();
}
del_img(e) {
    if (e == '3') {
        this.setState({
            imgsrc: '',
            fileimgshow: !0,
            imgstate: '',
        })
    }
}

// 上传图片
uploadimg(arr) {
    let uploadimgarr = [],
        { ueditor,  imgsrc,state,path } = this.state, that = this, lbimgarr = [], imgarr = [], html = ueditor.getContent();
    arr.forEach((x, i) => {
        if (x.indexOf(`${API_HEAD}`) == -1) {
            if (isBase64(x)) {
                uploadimg(x, res => {
                    if (res.issuccess == 1) {
                        x = `${API_HEAD}imgs/${res.path}`
                        uploadimgarr.push(x)
                    } else {
                        alert(res.msg)
                        err = 1
                        return;
                    }
                })
            }
        } else {
            uploadimgarr.push(x)
        }
    })
    if (uploadimgarr.length == arr.length) {
        uploadimgarr.forEach((x, i) => {
            if (i == 0) {
                imgsrc = x.replace(`${API_HEAD}imgs/`, '')
            }
        })
        
        var data = {
             detail: that.replaceraw(encodeURIComponent(html)),thumbpath:imgsrc,type:state,path
        }
        if (this.state.id > 0) data['id'] = this.state.id;
        console.log(data, 'data')
        Postdetail(data, res => {
            if (res.issuccess == 1) {
                alert(`${this.state.id > 0 ? '修改' : '保存'}成功`);
                window.location.href = "./firstPage.html";
            } else {
                alert(res.msg)
            }
        })
    }
}


    inputchange(prop, e) {
        this.setState({ [prop]: e.target.value })
    }



    submit() {
        var { ueditor,imgsrc,state  } = this.state, that = this, err = '', lbimgarr = [], imgarr = [];

        let reg = /^[0-9]*$/

        
       
        // if (!ueditor.hasContents()) err = '请输入商品详情';
        if(state=='') err = '请选择图片类型'
        if (!imgsrc) err = "请添加商品图片"
        if (err.length > 0) {
            alert(err);
            return
        }
        imgarr = imgarr.concat(imgsrc)
        this.uploadimg(imgarr)
    }


    
/**xyj  end*/

    render() {
        let {  imgsrc,state,path } = this.state;

        return (
            <div className="breadLinebox">

                <div className='content_wrap panel-default content_wrap'>
                    <div className="breadLine">
                        <div className="img">
                            {/* <img src={Constant.LEFTMENU_ORDER} /> */}
                            当前位置 > <span onClick={this.togoodstype.bind(this)} style={{ cursor: 'pointer' }}>轮播管理</span> > {this.state.id > 0 ? "编辑" : "新建"}轮播
                        </div>
                    </div>
                    <div className="content form">
                        <div className="formtitle">
                            <p>{this.state.id > 0 ? "编辑" : "新建"}</p>
                        </div>
                        <div className="formbox">
                            <div className="formcontent">
                            <div className="input-group">
                                    <span className="label input-group-addon">轮播图片</span>
                                    <input onChange={this.filechangeimg.bind(this, '3')} type='file' id='file3' style={{ display: "none" }} />
                                    <div className='detail_btns'>
                                        <img className='fileimg' src={Constant.UPLOADBTN} onClick={this.clickupload.bind(this, '3')} style={{ display: this.state.fileimgshow ? "" : "none" }} />
                                        <div className="img_warp" style={{ display: this.state.fileimgshow ? "none" : "" }}>
                                            <img src={imgsrc} className="img" />
                                            <img className='closeimg' onClick={this.del_img.bind(this, '3')} src='./src/img_close.png' style={{ display: this.state.fileimgshow ? "none" : "" }} />
                                        </div>
                                    </div>
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">图片类型</span>
                                    <div className="radiobox" onChange={this.inputchange.bind(this, 'state')}>
                                        <div className="radio"><input type="radio" name="state" id="stateCheckbox1" value="LISTEN"/><label for="stateCheckbox1"></label><span>首页</span></div>
                                        <div className="radio"><input type="radio" name="state" id="stateCheckbox2" value="MAIN" /><label for="stateCheckbox2"></label><span>线上借书</span></div>
                                        <div className="radio"><input type="radio" name="state" id="stateCheckbox3" value="GOODS" /><label for="stateCheckbox3"></label><span>商品轮播</span></div>
                                    </div>
                                </div>
                                <div className="input-group" style={{display:state=="GOODS"?"":"none"}}>
                                    <span className="input-group-addon">跳转路径</span>
                                    <input onChange={this.inputchange.bind(this,'path')} type="text" value={path} placeholder='请输入点击图片跳转的路径' className="input" />
                                </div>
                                <div className="input-group" style={{display:state!="GOODS"?"":"none"}}>
                                    <span className="label input-group-addon">图片详情</span>
                                    <textarea id={'ueditor'} style={{ height: "30vh" }} ></textarea>
                                </div>
                               
                            </div>
                            <div className="submitbox">
                                <button type="button" onClick={this.submit.bind(this)} className="submitbutton">提交</button>
                                <button type="button" onClick={this.togoodstype.bind(this)} className="submitbutton" style={{ marginLeft: '100' }}>返回</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        )


    }
}





ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            <LeftMenu code='firstPage' />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)